<template>
  <div class="pageContain" style="color: black; width: calc(100% - 2vw)">
    <div class="divBeteewn">
      <div
        class="addOneButton divCenter"
        style="margin-top: 2vh"
        @click="addOne()"
      >
        新增分组 +
      </div>
    </div>
    <el-table
      :data="dataList"
      :style="{ width: tableWidth }"
      style="height: auto; width: 100%; margin-top: 2vh"
      max-height="65vh"
      :header-row-style="{
        height: '6vh',
        fontSize: '1vw',
        color: 'white',
        background:
          'linear-gradient(90deg, white 0%, #005EBC 5%, #005EBC 95%, white 100%)',
        borderBottom: '1px solid #EBEEF5',
        borderRight: '1px solid #EBEEF5',
      }"
      :row-style="{ height: '7vh' }"
      border
    >
      <el-table-column prop="name" label="分组名称">
        <template #default="scope">
          <div style="color: #005ebc; font-size: 1vw">
            {{ scope.row?.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="electId" label="组内设备">
        <template #default="scope">
          <div
            style="color: #005ebc; font-size: 1vw"
            @click="showDetail(scope.row.id)"
          >
            查看详情
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="place" label="分组描述" align="center">
        <template #default="scope">
          <div
            style="color: #005ebc; font-size: 1vw"
            @click="showgroup(scope.row.remark)"
          >
            描述详情
          </div>
        </template></el-table-column
      >
      <el-table-column prop="showType" label="数据展示" align="center">
        <template #default="scope">
          <div v-if="scope.row.showType == 1">是</div>
          <div v-if="scope.row.showType == 2">否</div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="建立时间" align="center">
        <template #default="scope"
          ><div>{{ formatDate(scope.row.createTime) }}</div></template
        >
      </el-table-column>
      <el-table-column prop="groupAnalysis" label="分组同比分析" align="center">
        <template #default="scope">
          <div v-if="scope.row.groupAnalysis" class="optContain divBeteewn">
            是
          </div>
          <div v-else class="optContain divBeteewn">否</div>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="设置" align="center"
        ><template #default="scoped">
          <div class="optContain divBeteewn">
            <div
              class="edit"
              size="small"
              type="primary"
              @click="editOne(scoped.row.id)"
            ></div>
            <div
              class="delete"
              size="small"
              type="danger"
              @click="deleteOne(scoped.row.id, scoped.row.name)"
            ></div>
          </div> </template
      ></el-table-column>
      <el-table-column prop="net" label="是否启用" align="center">
        <template #default="scope">
          <div class="optContain divBeteewn">
            <el-checkbox
              class="checkbox1"
              v-model="scope.row.startFlag"
              v-if="bigScreen"
              @change="changeState(scope.row, scope.row.startFlag)"
            ></el-checkbox>
            <el-checkbox
              class="checkbox"
              v-model="scope.row.startFlag"
              @change="changeState(scope.row, scope.row.startFlag)"
              v-else
            ></el-checkbox>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="dialog" :style="{ display: dialog2 }">
      <div class="dialogInner">
        <div class="dialogInnerText" style="width: 56vw">
          <div class="dialogTop divCenter">
            <div class="dialogName">{{ addOrEdit }}设备</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>
          <div class="dialogTips divCenter">
            确定要删除 &nbsp{{ form.name }} &nbsp吗？
          </div>
          <div class="dubleButton divCenter">
            <div
              class="sureButton divCenter"
              style="background: #26c400"
              @click="close()"
            >
              取消
            </div>
            <div
              class="sureButton divCenter"
              style="background: #d30000"
              @click="sureDelete()"
            >
              确定
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog" :style="{ display: dialog3 }">
      <div class="dialogInner">
        <div class="dialogInnerText" style="width: 56vw">
          <div class="dialogTop divCenter">
            <div class="dialogName">组内设备</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>
          <el-table
            :data="detailList"
            style="height: auto; margin: auto; width: 100%"
            min-height="20vh"
            max-height="55vh"
            :header-row-style="{
              height: '6vh',
              fontSize: '1vw',
              color: '#0059B2',
            }"
          >
            <el-table-column
              align="center"
              label="设备名称"
              prop="name"
            ></el-table-column>
            <el-table-column
              align="center"
              label="ID"
              prop="id"
            ></el-table-column>
            <el-table-column
              align="center"
              label="安装位置"
              prop="location"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="dialog" :style="{ display: dialog4 }">
      <div class="dialogInner">
        <div class="dialogInnerText" style="width: 56vw">
          <div class="dialogTop divCenter">
            <div class="dialogName">分组描述</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>
          <div class="groupDetai">{{ remark }}</div>
        </div>
      </div>
    </div>
    <div class="dialog" :style="{ display: dialog5 }">
      <div class="dialogInner" style="overflow: auto">
        <div style="width: 6vw; height: 100%"></div>
        <div class="dialogInnerText" style="width: 28.6vw; height: 85vh">
          <div class="dialogTop divCenter" style="width: 100%">
            <div class="dialogName">{{ addOrEdit }}设备</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>

          <el-form
            :model="form"
            style="width: 90%; margin: auto; margin-top: 3.7vh"
          >
            <el-form-item label="分组名称">
              <el-input
                v-model="form.name"
                style="border-right: 1px solid #0281b8"
              />
            </el-form-item>
            <el-form-item label="分组描述">
              <el-input v-model="form.remark" type="textarea" :rows="7" />
            </el-form-item>
            <el-form-item label="数据展示">
              <el-select v-model="form.showType" placeholder="数据展示">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="同比分析">
              <el-select v-model="form.groupAnalysis" placeholder="数据展示">
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="设备选择">
              <div class="deviceContain">
                <div class="allDeviceContain">
                  <div class="oneDevice" v-for="item in clickLeftactual">
                    <div class="oneDeviceName">{{ item.name }}</div>
                  </div>
                </div>
                <div class="deviceBotton">
                  <div class="pageNation">
                    {{ currentPage }}/{{ totalPage }}
                  </div>
                  <div class="lastPage" @click="clickLeft()"></div>
                  <div class="nextPage" @click="clickRight()"></div>
                  <div class="newAdd" @click="showAddList = !showAddList">
                    {{ addOrEdit }}+
                  </div>
                </div>
              </div>
            </el-form-item>

            <div class="dubleButton divCenter">
              <div
                class="cancelButton divCenter"
                style="background: #d30000"
                @click="close()"
              >
                取消
              </div>
              <div class="sureButton divCenter" @click="sureAdd()">确定</div>
            </div>
          </el-form>
        </div>
        <div
          class="dialogInnerText"
          v-if="showAddList"
          style="height: 85vh; margin-left: 2vw; width: 57vw"
        >
          <div class="dialogTop1 divCenter">
            <div class="adddeviceaddeviceLeft" style="width: 23.5vw">
              <div class="addeviceLeft">
                <div class="addeviceTop divFlex">
                  <div class="deviceName">分组设备</div>
                  <el-input
                    v-model="inputAddSaerch"
                    style="
                      width: 16vw;
                      height: 4vh;
                      margin-left: 1vw;
                      font-size: 1vw;
                    "
                    placeholder="设备名称"
                  >
                    <template #append>
                      <el-icon class="el-input__icon" @click="handClick()"
                        ><search
                      /></el-icon>
                    </template>
                  </el-input>
                </div>
                <div class="justTable" id="justTable">
                  <el-table
                    :data="addDeviceList"
                    @selection-change="selecttableFunction"
                    style="width: 100%; height: auto"
                    :header-cell-style="{ height: '3vh' }"
                    max-height="52vh"
                  >
                    <el-table-column
                      type="selection"
                      prop="全选"
                      align="center"
                    />
                    <el-table-column prop="name" label="全选"></el-table-column>
                    <el-table-column prop="number" label=""></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="adddevice divflexColumn" style="width: 6vw">
              <div class="leftArrow" @click="clickLeftAdd()"></div>
              <div class="rightArrow" @click="clickRightRemove()"></div>
            </div>
            <div class="adddevice" style="width: 23.5vw">
              <div class="addeviceLeft">
                <div class="addeviceTop divFlex">
                  <div class="deviceName">全部设备</div>
                  <el-input
                    v-model="inputAllSaerch"
                    style="
                      width: 16vw;
                      height: 4vh;
                      margin-left: 1vw;
                      font-size: 1vw;
                    "
                    placeholder="设备名称"
                  >
                    <template #append>
                      <el-icon class="el-input__icon" @click="handClick1()"
                        ><search
                      /></el-icon>
                    </template>
                  </el-input>
                </div>
                <div class="justTable">
                  <el-table
                    :data="addDeviceList1"
                    @selection-change="selecttableFunction"
                    ref="myTable"
                    style="width: 100%; height: auto"
                    :header-cell-style="{ height: '3vh' }"
                    max-height="52vh"
                  >
                    <el-table-column
                      type="selection"
                      prop="全选"
                      align="center"
                    />
                    <el-table-column prop="name" label="全选"></el-table-column>
                    <el-table-column prop="number" label=""></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>

          <div class="dubleButton divCenter">
            <div
              class="cancelButton divCenter"
              style="background: #d30000"
              @click="showAddList = !showAddList"
            >
              取消
            </div>
            <!-- <div class="sureButton divCenter">确定</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sendMessage from "@/mitt/sendMessage.js";

import service from "@/api/api";
export default {
  name: "",
  beforeRouteEnter(to, from, next) {
    sendMessage(6, "分组管理");
    next();
  },
  data() {
    return {
      id: null,
      inputAddSaerch: "",
      inputAllSaerch: "",
      addDeviceList: [],
      addDeviceList1: [
        { name: "设备1", number: "SNXXXX1", id: 1 },
        { name: "设备2", number: "SNXXXX2", id: 2 },
      ],
      select: null,
      dialog1: "none",
      dialog2: "none",
      dialog3: "none",
      dialog4: "none",
      dialog5: "none",
      addOrEdit: "",
      currentPage: 1,
      totalPage: 1,
      clickLeftactual: [],
      dataList: [],
      tableWidth: "",

      form: {
        name: "",
        remark: "",
        deviceList: [],
        showType: null,
        createTime: "",
        startFlag: "",
        removeDeviceIds: [],
        groupAnalysis: null,
      },
      id: null,
      detailList: [],

      bigScreen: false,
      showAddList: false,
      selectionList: [],
      deviceList: [],
      forSerachAdd: [],
      forSearchAll: [],
      remark: "",
      saveOld: [],
      totalDevice: [],
      editArr: [],
    };
  },
  props: [],

  methods: {
    changeState(obj, state) {
      obj.state = state;
      console.log(obj.state, state);

      service({
        method: "put",
        url: "/group",
        data: obj,
      })
        .then((e) => {
          this.$message({
            message: "状态设置成功",
            type: "success",
          });
          this.getRenderList();
        })
        .catch((error) => {
          this.$message({
            message: "状态设置失败",
            type: "warning",
          });
          this.getRenderList();
        });
    },
    getNowTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 补0
      const day = String(date.getDate()).padStart(2, "0"); // 补0
      return `${year}-${month}-${day}`; // 格式示例: "2023-05-09"
    },
    sureAdd() {
      let data = {};
      if (!this.form.showType) {
        return this.$message({
          message: "数据展示必须选择",
          type: "warning",
        });
      }
      this.editArr = [];
      if (this.addOrEdit == "编辑") {
        console.log(this.deviceList, this.saveOld);
        if (
          this.deviceList.length &&
          this.deviceList.length > 0 &&
          this.saveOld.length > 0
        ) {
          this.deviceList.forEach((item) => {
            if (this.saveOld.length && this.saveOld.indexOf(item.id) == -1) {
              this.editArr.push(item);
            }
          });
        } else if (this.saveOld.length == 0) {
          this.editArr = this.deviceList;
        }
      }
      // return;

      if (this.addOrEdit == "新增") {
        data = {
          name: this.form.name,
          remark: this.form.remark,
          showType: this.form.showType,
          startFlag: 1,
          deviceList: this.deviceList,
          groupAnalysis: this.form.groupAnalysis,
        };
        service({
          method: "post",
          url: "/group",
          data: data,
        })
          .then((e) => {
            this.close();
            this.getRenderList();
            this.clear();
            this.$message({
              message: "新增成功",
              type: "success",
            });
          })
          .catch((err) => {
            console.log(err);
            this.clear();
            this.close();
          });
      } else if (this.addOrEdit == "编辑") {
        data = {
          name: this.form.name,
          remark: this.form.remark,
          showType: this.form.showType,
          deviceList: this.editArr,
          createTime: this.form.createTime,
          startFlag: this.form.startFlag,
          removeDeviceIds: this.form.removeDeviceIds,
          groupAnalysis: this.form.groupAnalysis,
          id: this.id,
        };
        console.log(data);
        // return;
        service({
          method: "put",
          url: "/group",
          data: data,
        })
          .then((e) => {
            console.log(e);
            this.close();
            this.getRenderList();
            this.clear();
            this.$message({
              message: "修改成功",
              type: "success",
            });
          })
          .catch((err) => {
            console.log(err);
            this.close();
            this.clear();
          });
      }
    },
    async allDevice() {
      let res = await service({
        method: "get",
        url: "/device/find-all",
      });
      this.totalDevice = res.data;

      this.forSearchAll = JSON.stringify(this.totalDevice);
      this.forSearchAll = JSON.parse(this.forSearchAll);
      this.addDeviceList1 = JSON.stringify(this.totalDevice);
      this.addDeviceList1 = JSON.parse(this.addDeviceList1);
    },
    async alldeviceForEdit() {
      let res = await service({
        method: "get",
        url: "/device/find-all",
      });

      this.forSearchAll = res.data;
    },
    async getRenderList() {
      let res = await service({
        method: "GET",
        url: "/group/find-all",
      });
      console.log("res", res);
      this.dataList = res.data;
    },

    showgroup(a) {
      this.dialog4 = "block";
      this.remark = a;
    },
    showDetail(id) {
      this.dataList.forEach((item) => {
        if (item.id == id) {
          if (item.deviceList.length && item.deviceList.length > 0) {
            this.detailList = item.deviceList;
            this.dialog3 = "block";
          } else {
            return this.$message({
              message: "暂无数据",
              type: "warning",
            });
          }
        }
      });
    },
    deleteOne(id, name) {
      this.dialog2 = "block";
      this.id = id;
      this.form.name = name;
    },
    sureDelete() {
      console.log(this.id);
      service({
        method: "DELETE",
        url: `/group/` + this.id,
      }).then((e) => {
        this.$message({
          message: "删除成功!",
          type: "success",
        });
        this.close();
        this.clear();
        this.getRenderList();
      });
    },
    editOne(a) {
      this.addOrEdit = "编辑";
      this.showAddList = false;
      this.forSearchAll = JSON.stringify(this.totalDevice);
      this.forSearchAll = JSON.parse(this.forSearchAll);

      this.dataList.forEach((item) => {
        if (item.id == a) {
          this.form.name = item.name;
          this.form.remark = item.remark;
          this.form.deviceList = item.deviceList;
          this.deviceList = JSON.stringify(item.deviceList);
          this.forSerachAdd = JSON.stringify(item.deviceList);
          this.forSerachAdd = JSON.parse(this.forSerachAdd);
          this.deviceList = JSON.parse(this.deviceList);
          this.totalPage = Math.ceil(this.deviceList.length / 8);
          this.currentPage = 1;
          this.form.groupAnalysis = item.groupAnalysis
            ? item.groupAnalysis
            : false;
          if (this.totalPage == 0) {
            this.totalPage = 1;
          }
          this.forSearchAll = this.forSearchAll.filter(
            (itemA) => !this.deviceList.some((itemB) => itemB.id === itemA.id)
          );

          item.deviceList.forEach((item) => {
            this.saveOld.push(item.id);
          });
          this.addDeviceList1 = JSON.stringify(this.forSearchAll);
          this.addDeviceList1 = JSON.parse(this.addDeviceList1);
          this.addDeviceList1 = this.addDeviceList1.filter(
            (itemA) => !this.deviceList.some((itemB) => itemB.id === itemA.id)
          );

          this.clickLeftactual = this.deviceList.slice(0, 8);
          this.addDeviceList = JSON.stringify(item.deviceList);
          this.addDeviceList = JSON.parse(this.addDeviceList);
          this.form.createTime = item.createTime;
          this.form.startFlag = item.startFlag;
          this.form.showType = item.showType;

          this.form.startFlag = item.startFlag;
        }
      });
      this.id = a;
      this.dialog5 = "block";
    },
    clear() {
      this.form = {
        name: "",
        remark: "",
        deviceList: [],
        showType: "",
        createTime: "",
        startFlag: "",
        removeDeviceIds: [],
      };
      this.id = null;
      this.remark = "";
      this.deviceList = [];
      this.addDeviceList = [];
      this.addDeviceList1 = [];
      this.saveOld = [];
      this.clickLeftactual = [];
      this.page = 1;
      this.forSerachAdd = [];
      this.forSearchAll = [];
    },
    addOne() {
      this.totalPage = 1;
      this.dialog5 = "block";
      this.addOrEdit = "新增";
      this.showAddList = false;
      this.forSearchAll = JSON.stringify(this.totalDevice);
      this.forSearchAll = JSON.parse(this.forSearchAll);
      this.addDeviceList1 = JSON.stringify(this.totalDevice);
      this.addDeviceList1 = JSON.parse(this.addDeviceList1);
    },
    close() {
      this.dialog1 = "none";
      this.dialog2 = "none";
      this.dialog3 = "none";
      this.dialog4 = "none";
      this.dialog5 = "none";
      this.clear();
    },
    handClick() {
      this.addDeviceList = [];
      if (this.inputAddSaerch) {
        this.forSerachAdd.forEach((item) => {
          if (item.name.includes(this.inputAddSaerch)) {
            this.addDeviceList.push(item);
          }
        });
      }
    },
    handClick1() {
      this.addDeviceList1 = [];
      if (this.inputAllSaerch) {
        this.forSearchAll.forEach((item) => {
          if (item.name.includes(this.inputAllSaerch)) {
            this.addDeviceList1.push(item);
          }
        });
      }
      console.log(this.forSearchAll);
    },
    handResize() {
      this.tableWidth = window.innerWidth - 150 + "px";
      console.log(window.innerWidth);
      if (window.innerWidth > 1920) {
        this.bigScreen = true;
      } else {
        this.bigScreen = false;
      }
    },
    onSubmit() {
      console.log("submit!");
    },
    sendMessage() {
      let res = this.$route.path;
      EventBus.emit("custom-event", res);
    },
    selecttableFunction(selectedRows) {
      console.log(selectedRows);
      this.selectionList = selectedRows;
    },
    clickLeftAdd() {
      this.inputAddSaerch = "";
      this.inputAllSaerch = "";

      this.forSerachAdd.push(...this.selectionList);
      this.addDeviceList = JSON.stringify(this.forSerachAdd);
      this.addDeviceList = JSON.parse(this.addDeviceList);

      this.forSearchAll = this.forSearchAll.filter(
        (itemA) => !this.selectionList.some((itemB) => itemB.id === itemA.id)
      );

      this.selectionList.forEach((item) => {
        if (this.saveOld.includes(item.id)) {
          if (this.form.removeDeviceIds.includes(item.id)) {
            console.log(
              "this.form.removeDeviceIds.indexOf(item.id)=",
              this.form.removeDeviceIds.indexOf(item.id)
            );
            this.form.removeDeviceIds.splice(
              this.form.removeDeviceIds.indexOf(item.id),
              1
            );
            // 将不存在于 b 的 id 加入
          }
        }
      });

      this.addDeviceList1 = JSON.stringify(this.forSearchAll);
      this.addDeviceList1 = JSON.parse(this.addDeviceList1);
      this.$nextTick(() => {
        this.$refs.myTable.clearSelection(); // 清空所有选中状态
      });
      this.deviceList = JSON.stringify(this.forSerachAdd);
      this.deviceList = JSON.parse(this.deviceList);
      this.currentPage = 1;
      this.totalPage = Math.ceil(this.deviceList.length / 8);
      console.log(this.totalPage);
      this.clickLeftactual = this.deviceList.slice(0, this.currentPage * 8);
    },
    clickRightRemove() {
      this.inputAddSaerch = "";
      this.inputAllSaerch = "";
      // this.forSearchAll.unshift(...this.selectionList);
      console.log(this.selectionList);
      this.selectionList.forEach((item) => {
        if (this.forSearchAll.indexOf(item) == -1) {
          console.log(item);
          this.forSearchAll.unshift(item);
        }
      });

      this.selectionList.forEach((item) => {
        if (this.saveOld.includes(item.id)) {
          if (!this.form.removeDeviceIds.includes(item.id)) {
            this.form.removeDeviceIds.push(item.id); // 将不存在于 b 的 id 加入
          }
        }
      });

      this.forSerachAdd = this.forSerachAdd.filter(
        (itemA) => !this.selectionList.some((itemB) => itemB.id === itemA.id)
      );
      this.addDeviceList1 = JSON.stringify(this.forSearchAll);
      this.addDeviceList1 = JSON.parse(this.addDeviceList1);
      this.addDeviceList = JSON.stringify(this.forSerachAdd);
      this.addDeviceList = JSON.parse(this.addDeviceList);
      this.$nextTick(() => {
        this.$refs.myTable.clearSelection(); // 清空所有选中状态
      });
      this.deviceList = JSON.stringify(this.forSerachAdd);
      this.deviceList = JSON.parse(this.deviceList);
      this.currentPage = 1;
      this.totalPage = Math.ceil(this.deviceList.length / 8);
      if (this.totalPage == 0) {
        this.totalPage = 1;
      }
      this.clickLeftactual = this.deviceList.slice(0, this.currentPage * 8);
      console.log(this.form.removeDeviceIds);
    },
    clickLeft() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.clickLeftactual = this.deviceList.slice(
          (this.currentPage - 1) * 8,
          this.currentPage * 8
        );
      }
    },
    clickRight() {
      if (this.currentPage < this.totalPage) {
        this.currentPage++;
        console.log(this.currentPage);
        this.clickLeftactual = this.deviceList.slice(
          (this.currentPage - 1) * 8,
          this.currentPage * 8
        );
        console.log(this.deviceList);
        console.log((this.currentPage - 1) * 8, this.currentPage * 8);
        console.log(this.clickLeftactual);
      }
    },
    formatDate(a) {
      if (a) {
        let date = new Date(a);
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, "0");
        let day = String(date.getDate()).padStart(2, "0");
        let hour = String(date.getHours()).padStart(2, "0");
        let min = String(date.getMinutes()).padStart(2, "0");
        let second = String(date.getSeconds()).padStart(2, "0");
        return `${year}-${month}-${day} ${hour}:${min}:${second}`;
      } else {
        return "";
      }
    },
  },
  created() {
    this.handResize();
    this.getRenderList();
    this.allDevice();
    console.log(sessionStorage.getItem("token"));
  },
  mounted() {
    // this.sendMessage();
    window.addEventListener("resize", this.handResize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handResize);
  },
};
</script>
<style lang="less" scoped>
.lastPage {
  width: 0.5vw;
  height: 1.5vh;
  background: url(@/assets/img/clickLeft.png);
  background-size: 100% 100%;
  margin-left: 1vw;
}
.nextPage {
  width: 0.5vw;
  height: 1.5vh;
  background: url(@/assets/img/clickRight.png);
  background-size: 100% 100%;
  margin-left: 1vw;
}
.newAdd {
  width: 4.3vw;
  height: 2.9vh;
  background: #0059b2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1vw;
  color: white;
  margin-left: 2vw;
}
:deep(.el-table td.el-table__cell) {
  border-bottom: 1px solid #a4a6a7;
}
:deep(.el-table tr:last-child td) {
  border-bottom: none;
}
.addeviceLeft {
  width: 100%;
  height: 66.8vh;
  background: #efefef;
  margin-top: 2vh;

  margin-bottom: 2vh;
  overflow: hidden;
  .addeviceTop {
    width: 95%;
    margin: 0 auto;
    margin-top: 2vh;
    display: flex;
    .deviceName {
      width: 4vw;
      font-size: 1vw;
    }
  }
}

// table的修改部分===========
.el-table {
  font-size: 1vw;
}
:deep(.el-table__cell) {
  padding: 0 !important;
}
:deep(.el-table__cell .cell) {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3.5vh;
  padding: 0 !important;
  // height: 7vh !important;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

// table样式修改结束=======================
.el-input {
  width: 100%;
}
:deep.el-form-item__content {
  margin-left: 0 !important;
}
.deviceContain {
  width: 100%;
  height: 27.8vh;
  border: 1px solid #0281b8;
  background: #efefef;
  align-items: baseline;
  .allDeviceContain {
    width: 95%;
    margin: auto;
    height: 20vh;
    margin-top: 1vh;
    display: flex;
    flex-wrap: wrap;
    .oneDevice {
      width: 9vw;
      background: #0070d6;
      height: 3vh;
      color: white;
      font-size: 0.8vw;
      align-items: center;
      margin-left: 0.5vw;
      display: flex;
      .oneDeviceName {
        display: flex;
        height: 100%;
        line-height: 1.5vh;
        align-items: center;
        justify-content: center;
        width: 8.5vw;
        padding-left: 0.3vw;
      }
    }
  }
  .deviceBotton {
    width: 100%;
    display: flex;
    align-items: center;
    .pageNation {
      margin-left: 40%;
    }
  }
}
.groupDetai {
  width: 100%;
  margin: auto;
  padding: 1vh 1vw;
  font-size: 1.2vw;

  min-height: 20vh;
}
.optContain {
  width: 5.5vw;

  .edit {
    width: 2.1vw;
    height: 2.1vw;

    background: url(@/assets/img/shezhi.png);
    background-size: 100% 100%;
  }
  .delete {
    width: 2.1vw;
    height: 2.1vw;

    background: url(@/assets/img/delete.png);
    background-size: 100% 100%;
  }
}
:deep(.el-form-item__label) {
  font-size: 1vw;
  color: black;
}
:deep(.el-form-item) {
  margin-bottom: 2vh;
}
:deep(.el-input__wrapper) {
  height: 4vh !important;
  background: #efefef !important;
}
:deep(.el-input__inner) {
  font-size: 1vw;
  height: 4vh !important;
}

:deep(.el-input__inner) {
  // height: 5vh !important;
  border: 1px solid #0281b8;

  text-indent: 0.5vw;
  border-right: none !important;
  // box-shadow: none !important;
}

:deep(.el-input-group__append) {
  box-shadow: 0 1px 0 0 #0281b8 inset, 0 -1px 0 0 #0281b8 inset,
    -1px 0 0 0 #0281b8 inset !important;
  background: #efefef !important;
  height: 4vh !important;
}
:deep(.el-input__wrapper) {
  background: #efefef !important;
  border-right: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 3px;
}
:depp(.el-input__icon) {
  color: #0281b8;
}

:deep(.el-textarea__inner) {
  background: #efefef !important;
  box-shadow: 0 0 0 1px #0281b8 inset;
  line-height: 2vh;
  padding: 1vh 0.5vw;
  font-size: 1vw;
}
:deep(.el-select__wrapper) {
  height: 4vh !important;
  background: #efefef !important;
  // box-shadow: 0 0 0 1px #0281b8 inset;
}

:deep(.el-select__selected-item) {
  font-size: 1vw;
  height: 4vh;
  display: flex;
  align-items: center;
  // box-shadow: 0 0 0 1px #0281b8 inset;
}

.el-select-dropdown__item {
  height: 3vh !important; /* 修改高度 */
  line-height: 3vh !important; /* 修改行高，保持与高度一致 */
  font-size: 1vw !important; /* 修改字体大小 */
}
:deep(.el-checkbox__inner) {
  box-shadow: 0 0 0 1px #0281b8 inset;
}
:deep(.el-table .el-checkbox__inner) {
  transform: scale(2); /* 放大1.5倍 */
  margin: 6px; /* 增加外边距避免重叠 */
}
.justTable {
  width: 95%;
  margin: auto;
}

.leftArrow {
  width: 3.9vw;
  height: 4.6vh;

  background: url(@/assets/img/left.png);
  background-size: 100% 100%;
}
.rightArrow {
  width: 3.9vw;
  height: 4.6vh;

  background: url(@/assets/img/right.png);
  background-size: 100% 100%;
}
.homePageTop {
  width: 100%;
  display: flex;
}
</style>
